<template>
    <div>
        <el-row :span="15" style="height: 500px;">
            <el-col style="width: 15%;margin: auto,auto;">
                <el-row>
                    <el-card>
                        <span>营收额</span>
                        <p>{{ }}元</p>
                        <p>{{ }}元<br>本月营收额</p>|<p>{{ }}元<br>本月营收额</p>
                    </el-card>
                </el-row>

                <el-row>
                    <span>|待办事项</span>
                    <el-card>
                        <span>异常订单(单)</span>
                        <p>{{ 1000 }}</p>
                        <el-button type="primary">查看</el-button>
                    </el-card>
                </el-row>

            </el-col>

            <el-col :span="9">
                <span>|路段简报</span>
                <el-table :data="tableData">
                    <el-table-column prop="date" label="路段名称">
                    </el-table-column>
                    <el-table-column prop="name" label="车位数量">
                    </el-table-column>
                    <el-table-column prop="address" label="使用中车位">
                    </el-table-column>
                    <el-table-column prop="address" label="车位使用率">
                    </el-table-column>
                    <el-table-column prop="address" label="今日订单量">
                    </el-table-column>
                    <el-table-column prop="address" label="今日营收">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>



        <el-row>
            <el-row>
                <span>|营销数据</span>
                <el-form :inline="true">
                    <el-form-item label="角色选择">
                        <el-select placeholder="请选择角色">
                            <el-option label="区域一" value="shanghai" v-for="role in roleList" :key="role.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间选择">
                        <el-date-picker type="datetimerange" :picker-options="pickerOptions" range-separator="~"
                            start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-row>

            <el-row>
                <!-- 放表格 -->
                <el-table :data="tableData">
                    <el-table-column prop="date" label="日期">
                    </el-table-column>
                    <el-table-column prop="name" label="订单数量">
                    </el-table-column>
                    <el-table-column prop="address" label="营收额">
                    </el-table-column>
                    <el-table-column prop="address" label="退款订单">
                    </el-table-column>
                    <el-table-column prop="address" label="退款金额">
                    </el-table-column>
                    <el-table-column prop="address" label="用户增长">
                    </el-table-column>
                </el-table>
            </el-row>

            <el-row>
                <el-pagination background :page-sizes="[5, 10, 15, 20]" :current-page="pageNum" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @next-click="nextPage"
                    @prev-click="prevPage" @current-change="changePage" @size-change="changeSize">
                </el-pagination>
            </el-row>

            <el-col>
                <!-- 放折线图 -->
            </el-col>

        </el-row>

    </div>
</template>

<script>
export default {
    data() {
        return {
            pageSize: 5,
            pageNum: 1,
            total: 0,
            roleList: [],
            tableData: [],
            pickerOptions: []

        }
    },

    methods: {

        nextPage(val) {
            this.pageNum = val;
            this.queryAllGoods()
        },

        prevPage(val) {
            this.pageNum = val;
            this.queryAllGoods()
        },

        changePage(val) {
            this.pageNum = val;
            this.queryAllGoods()
        },

        changeSize(val) {
            this.pageNum = 1;
            this.pageSize = val;
            this.queryAllGoods()
        }
    },
}
</script>

<style scoped></style>